<template>
  <div class="chuangjianduanxin">
    <div class="kflexc" style="margin-bottom: 20px;">
      <div style="color: rgb(25, 137, 250); cursor: pointer;" @click="fanhui"><< 返回</div>
      <div class="titles">创建短信任务</div>
    </div>

    <div style="padding:20px 40px;">
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务名称</div>
        <div class="l2">
          <el-input placeholder="请输入任务名称" v-model="all.name"></el-input>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务列表</div>
        <div class="l2">
          已选择 <span style="color: rgb(25, 137, 250); margin: 0 10px;">{{shuliang}}</span> 人
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">短信签名</div>
        <div class="l2">
          <el-select v-model="all.sign" placeholder="输入短信签名">
            <el-option :value="item.id" v-for="item in qianminglist" :key="item.id" :label="item.name"></el-option>
          </el-select>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">定时发送时间</div>
        <div class="l2">

          <el-date-picker v-model="all.sendtime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">短信内容</div>
        <div class="l2">
         <el-select v-model="all.type" clearable @change="getlist2()" placeholder="模板类型">
           <el-option label="下单提醒" value="1"></el-option>
           <el-option label="订单信息完善" value="2"></el-option>
           <el-option label="开卡结果通知" value="3"></el-option>
           <el-option label="发货通知" value="4"></el-option>
           <el-option label="催促激活" value="5"></el-option>
           <el-option label="其他" value="6"></el-option>
         </el-select>
         <el-select v-model="all.formwork_id" @change="change" clearable placeholder="短信模板">
           <el-option :label="item.name" v-for="item in tableData" :key="item.id" :value="item.id"></el-option>
         </el-select>
         <el-button type="text" @click="goid('/duanxin/duanxinmoban')">新建模板</el-button>
        </div>
      </div>
      <div>
        <el-button round @click="faduanxin" :disabled="ing" type="danger" plain>确定创建</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'chuangjianduanxin',
    data() {
      return {
        ing:false,
        search:{},
        list:"",
        jieguo:{
          name:"人群短信通知结果",
          log:false,
          list:""
        },
        all:{
          type:"",
          formwork_id:"",
          crowd_id:this.$route.query.id,
          flag:2,
          content:"",
          sign:"",
        },
        tableData:"",
        qianminglist:"",
        shuliang:""
      }
    },
    created() {
      this.getlist2()
      this.getsign()
      this.shuliang = this.$route.query.shuliang
    },
    methods:{
      change:function(val){
        if(this.tableData != ''){
          this.tableData.forEach(item=>{
            if(item.id == val){
               this.all.content = item.content
            }
          })
        }
      },
      fanhui:function(){
        this.$router.go(-1)
      },
      faduanxin:function(){
        this.ing = true
        axios.post('/api/plan-market/crowd/sms-send/new',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('创建成功');
              this.fanhui()
              setTimeout(()=>{
                this.ing = false
              },500)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      search:function(){

      },
      getlist:function(){

      },
      //获取全部
      getlist2:function() {
        var that = this
        axios.get('/api/plan-market/message/formwork/list?flag=1&type=' + this.all.type)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data
              this.all.formwork_id = ''
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取签名
      getsign:function(){
          var that = this;
          axios.get('/api/plan-market/message/getsign')
          		.then(response => {
          			if(response.data.msg.code == 0){
          				this.qianminglist = response.data.data
                  if(this.qianminglist == ''){
                    this.renwu.sign = ''
                  }
          			}else{
          				this.$message.error(response.data.msg.info);
          			}
          		})
      },
    }
  }
</script>

<style lang="scss" scoped>
  .chuangjianduanxin{ padding: 20px;
    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0; width: 250px;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .titles{ font-size: 20px; font-weight: bold; font-family: '微软雅黑'; margin-left: 20px;}
    .l1{ font-size: 14px; color: rgb(51, 51, 51); width: 80px;  text-align: right; margin-right: 20px;}
    .l2{ font-size: 14px; min-width: 400px;}
  }
</style>
